<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md='4' :sm='8'>
          <a-form-item label='所属项目' :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select show-search :filter-option="filterOption"  v-model='queryParam.projectId' placeholder='请输入所属项目' style='width: 100%'>
            <a-select-option value=''>请选择项目</a-select-option>
            <a-select-option v-for='item in projectList' :label='item.name' :value='item.id' :key='item.id'>
              <span style="float: left">{{item.name}}</span>
            </a-select-option>
          </a-select>
          </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <a-form-item label="操作类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag v-model='queryParam.optionType' dictCode='option_type'
                                 style='width: 100%'></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <a-form-item label="操作状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag v-model='queryParam.optionStatus' dictCode='option_status'
                                 style='width: 100%'></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <a-form-item label="设备序列号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="queryParam.deviceNumber" placeholder="请输入设备序列号" style='width: 100%'></a-input>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <a-form-item label="创建时间 ">
              <a-range-picker v-model="queryParam.createTimeRange" @change="onChangeRangeTime"/>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='8'>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">

          <a v-if="record.responseResult===0" style="color: blue" >下发成功</a>
          <a v-else-if="record.responseResult==null||record.responseResult==undefined" style="color: green" >待生效</a>
          <a v-else-if="record.responseResult!=0" @click="resendCMD(record)">重新下发</a>
        </span>
        <span slot="responseResult" slot-scope="text">
          <span v-if="text==null||text==undefined" style="color: green">待生效</span>
          <span v-else-if="text==0" style="color: blue">发送成功</span>
          <span v-else-if="text!=0" style="color: red">发送失败</span>
        </span>

      </a-table>
    </div>
  </a-card>
</template>

<script>
    import {mixinDevice} from '@/utils/mixin'
    import {JeecgListMixin} from '@/mixins/JeecgListMixin'
    import {filterObj} from '@/utils/util'
    import {getAction, postAction} from '@api/manage'
    import {initDictOptions} from '@comp/dict/JDictSelectUtil'
    import { getProjectList } from '@api/api'

    export default {
        name: 'UserCmdLogList',
        mixins: [JeecgListMixin, mixinDevice],

        data() {
            return {
                // 分页参数
                ipagination: {
                    current: 1,
                    pageSize: 10,
                    // pageSizeOptions: ['10', '20', '30'],
                    pageSizeOptions: ['10', '20', '50', '100'],
                    showTotal: (total, range) => {
                        return range[0] + '-' + range[1] + ' 共' + total + '条'
                    },
                    showQuickJumper: true,
                    showSizeChanger: true,
                    total: 0,
                    isorter: {
                        column: 'createTime',
                        order: 'desc'
                    },
                },
                /*查询区域属性*/
                queryParam: {
                    optionType: '',
                    optionStatus: '',
                    deviceSn: '',
                    opTime_begin: "",
                    opTime_end: "",
                },
                labelCol: {
                    xs: {span: 24},
                    sm: {span: 5},
                },
                wrapperCol: {
                    xs: {span: 24},
                    sm: {span: 16},
                },
                confirmLoading: false,
                validatorRules: {},
                description: '设备记录表管理页面',
                // 表头
                columns: [
                    {
                        title: '项目名称',
                        align: "center",
                        dataIndex: 'projectName',
                    },
                    {
                        title: '用户名',
                        align: "center",
                        dataIndex: 'userName'
                    },
                    {
                        title: '操作类型',
                        align: "center",
                        dataIndex: 'optionType_dictText'
                    },
                    {
                        title: '操作状态',
                        align: "center",
                        dataIndex: 'responseResult',
                        scopedSlots: {customRender: 'responseResult'}
                    },
                    {
                        title: '设备序列号',
                        align: "center",
                        dataIndex: 'deviceNumber'
                    },
                    {
                        title: '错误日志',
                        align: "center",
                        dataIndex: 'responseMessage'
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        dataIndex: 'createTime'
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        align: "center",
                        fixed: "right",
                        width: 147,
                        scopedSlots: {customRender: 'action'}
                    }
                ],
                url: {
                    list: "/cmdLog/list",
                    resendCmd: "/cmdLog/resendCmd"
                },
              projectList:[],
                dictOptions: {},
                superFieldList: [],
            }
        },
        created() {
            this.initDictConfig();
            this.initProjectList()
        },
        methods: {
          initProjectList() {
            getProjectList().then((res)=>{
              if(res.success){
                this.projectList = res.result
              }
            })
          },
          filterOption(input, option) {
            let com = option.componentOptions
            let name = String(com.propsData.label)
            if(name.toLowerCase().includes(input.toLowerCase())){
              return true
            }
          },
            resendCMD(record) {
                this.loading = true;
                getAction(this.url.resendCmd, {id:record.id}).then((res) => {
                    if (res.success) {
                        this.$message.success(res.message)
                    } else {
                        this.$message.warning(res.message)
                    }
                });
                this.loading = false;
            },
            onChangeRangeTime(date, dateString) {
                this.queryParam.opTime_begin = dateString[0];
                this.queryParam.opTime_end = dateString[1];
            },
            searchQuery() {
                let startTime = this.queryParam.opTime_begin;
                let endTime = this.queryParam.opTime_end;
                console.log("----------" + this.queryParam.deviceType);
                if (startTime != "" && endTime != "") {
                    if (startTime > endTime) {
                        this.$message.error("开始时间不能大于结束时间");
                        return
                    }
                }

                if (startTime == "" && endTime != "") {
                    this.$message.error("请选择开始时间");
                    return
                }

                if (startTime != "" && endTime == "") {
                    this.$message.error("请选择结束时间");
                    return
                }

                this.loadData(1);
            },
            searchReset: function () {
                this.queryParam = {
                    optionType: '',
                    optionStatus: '',
                }
                this.loadData(1);
            },
            getQueryParams() {
                var param = Object.assign({}, this.isorter, this.queryParam);
                param.field = this.getQueryField();
                param.pageNo = this.ipagination.current;
                param.pageSize = this.ipagination.pageSize;
                if (this.queryParam.opTime_begin != "" && this.queryParam.opTime_end != "") {
                    if (this.queryParam.opTime_begin != undefined) {
                        param.opTime_begin = this.queryParam.opTime_begin + " 00:00:00";
                    }
                    if (this.queryParam.opTime_end != undefined) {
                        param.opTime_end = this.queryParam.opTime_end + " 23:59:59";
                    }
                }

                return filterObj(param);
            },
            /*展示数据*/
            loadData(arg) {
                if (!this.url.list) {
                    this.$message.error("请设置url.list属性!")
                    return
                }
                //加载数据 若传入参数1则加载第一页的内容
                if (arg === 1) {
                    this.ipagination.current = 1;
                }
                var params = this.getQueryParams();//查询条件
              console.log(params)
                this.loading = true;
                getAction(this.url.list, params).then((res) => {
                  debugger
                    if (res.success && res.result != null) {
                        console.log(res.result)
                        this.dataSource = res.result.records;
                      console.log("@@@@",this.dataSource)
                        this.ipagination.total = res.result.total;
                    }
                    if (res.code === 510) {
                        this.$message.warning(res.message)
                    }
                    this.loading = false;
                })

            },
        }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>